<template>
  <div class="main">
    <el-row :gutter="12">
      <el-col :span="8">
        <el-card>
          <div slot="header">
            <span>今日订单数</span>
          </div>
          <div>
            {{ headData.today_order_count }}
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <div slot="header">
            <span>今日日活</span>
          </div>
          <div>
            {{ headData.conversion_rate }}
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <div slot="header">
            <span>今日销量总价</span>
          </div>
          <div>
            {{ headData.dau }}
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div ref="echartDiv" class="product" />
  </div>
</template>

<script>
import { dashEchart, dashHead } from "@/api/dashboard";
import * as echarts from "echarts";
export default {
  name: "DashboardEditor",
  data() {
    return {
      headData: {},
      echartData: {},
    };
  },
  async created() {
    let headData = await dashHead();
    this.headData = headData.data;
  },
  async mounted() {
    let echartData = await dashEchart();
    this.echartData = echartData.data;
    //echart的使用
    let myChart = echarts.init(this.$refs.echartDiv);
    let option = {
      title: {
        text: "商品销量一览表",
      },
      tooltip: { trigger: "axis", axisPointer: { type: "cross" } },
      legend: {
        data: ["订单总数", "销量总价", "人均消费", "近十分钟新增订单数"],
      },
      xAxis: {
        data: [
          "星期一",
          "星期二",
          "星期三",
          "星期四",
          "星期五",
          "星期六",
          "星期日",
        ],
      },
      yAxis: {},
      series: [
        {
          name: "订单总数",
          type: "line",
          data: this.echartData.order_total,
          stack: "x",
          areaStyle: {},
        },
        {
          name: "销量总价",
          type: "line",
          data: this.echartData.new_order,
          stack: "x",
          areaStyle: {},
        },
        {
          name: "人均消费",
          type: "line",
          data: this.echartData.sale_price_total,
          stack: "x",
          areaStyle: {},
        },
        {
          name: "近十分钟新增订单数",
          type: "line",
          data: this.echartData.consumption_per_person,
          stack: "x",
          areaStyle: {},
        },
      ],
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  },
};
</script>

<style lang="scss" scoped>
.main {
  background: #f5f6f7;
  min-height: 100vh;
  padding: 40px 60px 0 60px;
  .product {
    margin-top: 50px;
    padding: 10px;
    width: 100%;
    height: 500px;
    background-color: #fff;
  }
}
</style>
